<template>
  <div class="box">
    <div class="content">
      <div class="text" v-for="(item, i) in findApproveData" :key="i">
        <div class="number">
          <span class="litsItem">{{ i + 1 }}</span>
        </div>
        <b class="line"></b>
        <ul>
          <li v-if="item.approveName !== null">
            <span>审批流程：</span><span>{{ item.approveName }}</span>
          </li>
          <li v-if="item.departmentName !== null">
            <span>审批部门：</span><span>{{ item.departmentName }}</span>
          </li>
          <li v-if="item.roleName !== null">
            <span>审批角色：</span><span>{{ item.roleName }}</span>
          </li>
          <li v-if="item.employeeName !== null">
            <span>实际审批人:</span><span>{{ item.employeeName }}</span>
          </li>
          <li v-if="item.status !== null">
            <span>审批状态:</span><span>{{ item.status }}</span>
          </li>
          <li v-if="item.ask !== null">
            <span>审批要求：</span><span>{{ item.ask }}</span>
          </li>
          <li v-if="item.approveTime !== null">
            <span>审批时间：</span><span>{{ item.approveTime }}</span>
          </li>
          <li v-if="item.result !== null">
            <span>批准提案:</span><span>{{ item.result }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="footer" v-if="this.findFilterData">
      <p>我要批准（当前流程您可以批准）：</p>
      <ul style="margin-left:30px">
        <li>
          <span>审批流程：</span
          ><span>{{ this.findFilterData.approveName }}</span>
        </li>
        <li>
          <span>审批要求：</span
          ><span>{{ this.findFilterData.approveExplain }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  getfindApproveRecordList,
  getEmployee,
  getfindFilter
} from "../../assets/js/api";
export default {
  name: "InforTextToo",
  props: ["orderNumber"],
  data() {
    return {
      findApproveData: [],
      approveStatusData: [],
      findFilterData: {}
    };
  },
  created() {
    this.approveStatus();
    this.getfindApproveRecordList();
  },
  methods: {
    getfindApproveRecordList() {
      getfindApproveRecordList(this.orderNumber).then(res => {
        this.findApproveData = res.data;
        this.findApproveData.map(item => {
          item.status = this.selectDictLabel(
            this.approveStatusData,
            item.status
          );
          return item;
        });
      });
      getfindFilter(this.orderNumber).then(res => {
        this.findFilterData = res.data;
        this.$emit("findFilterData", this.findFilterData);
      });
    },
    // 翻译审批状态
    approveStatus() {
      getEmployee("approve_status").then(res => {
        this.approveStatusData = res.data;
      });
    }
  }
};
</script>

<style scoped type="less">
.box {
  margin-bottom: 30px;
}
.text {
  text-align: left;
  height: auto;
  margin-left: 20px;
  position: relative;
  padding-left: 30px;
}
.text ul {
  margin-bottom: 30px;
  height: auto;
}
.text .number {
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 18px;
  background: rgba(59, 157, 248, 1);
  border-radius: 50%;
  text-align: center;
  color: #fff;
  left: -9px;
  top: 20px;
  position: absolute;
  z-index: 2;
}
.line {
  display: block;
  width: 1px;
  height: calc(100% + 30px);
  background: rgba(59, 157, 248, 1);
  position: absolute;
  left: 0;
  top: 30px;
  z-index: 1;
}
.text:nth-last-of-type(1) .line {
  display: none;
}
.text ul {
  background: rgba(248, 248, 248, 1);
  border-radius: 10px;
  padding: 19px 23px;
}
.footer {
  text-align: left;
  margin: 0 0 0 30px;
  padding-top: 10px;
  border-top: 1px rgb(121, 121, 121) solid;
}
</style>
